<template>
	<view class="u-page">
		<view class="u-demo-block" >
			<view class="u-demo-block__content" style="width: 375rpx;height: 50px;"><u--image :showLoading="true" :src="imgSrc" width="750rpx" height="50px" mode="scaleToFill"></u--image></view>
		</view>
		<u-transition 
				:show="transitionShow" 
				:duration="200"
				:mode="getRandomTransitionMode()">
			<my-navi></my-navi>
			<view style="height: 40px;width: auto;background-color: #f3f4f6;"></view>
		</u-transition>
		<my-menu-drawer ref="myMenuDrawer"></my-menu-drawer>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// title: 'Hello',
			windowHeight: 100,
			// imgSrc: '/static/img/slogan.png',
			imgSrc:'/static/img/img_main_top_en.png',
			transitionShow: false,
			transitionModeList:[
				'fade',
				'fade-up',
				'fade-down',
				'fade-left',
				'fade-right'
			]
		};
	},
	onLoad() {
		console.log(uni.$u.config.v);
	},
	onShow() {
		this.transitionShow=true
		this.windowHeight=uni.getWindowInfo().windowHeight
	},
	onHide() {
		this.transitionShow=false
	},
	onNavigationBarButtonTap(e) {
		if (e.type === 'menu') {
			this.showMenuDrawer();
		}
	},
	methods: {
		showMenuDrawer() {
			this.$refs.myMenuDrawer.$refs.showLeft.open();
		},
		getRandomTransitionMode(){
			return this.transitionModeList[uni.$u.random(0,this.transitionModeList.length)];
		}
	}
};
</script>

<style lang="scss">
.u-page {
	padding: 0;
}
.u-demo-block {
	&__content {
		height: 100px;
		width: 100%;
	}
}
</style>
